<template>
  <div id="am">
    <listL :tableData="tableData" @update="updateTh" @delete="deleteTh"></listL>
    <div class="page">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        @size-change="asd"
        @current-change="pagechange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pages">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import listL from './list.vue'
export default {
  name: 'comList',
  mounted () {
    this._getlist(this.pagesize, this.currentPage).then(res => {
      if (res.data.code === 200) {
        this.tableData = this.formt(res.data.data)
        this.total = res.data.total
      }
    })
  },
  components: {
    listL
  },
  data () {
    return {
      currentPage: 1,
      tableData: [],
      pagesize: 10,
      total: 0
    }
  },
  methods: {
    updateTh (data) {
      var dataa = data
      dataa.pagesize = this.pagesize
      dataa.pagenum = this.currentPage
      this.axios.post('/api/create', dataa).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.tableData = this.formt(res.data.data)
          this.total = res.data.total
        }
      })
    },
    formt (list) {
      let ret = list
      ret.forEach(item => {
        // item.deadtime = item.deadtime.substring(0, 10)
        switch (item.status) {
          case 0:
            item.status = '待办'
            break
          case 1:
            item.status = '完成'
            break
          case 2:
            item.status = '删除'
            break
        }
      })
      return ret
    },
    deleteTh (data) {
      var dataa = data
      dataa.pagesize = this.pagesize
      dataa.pagenum = this.currentPage
      this.axios.post('/api/delete', dataa).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.tableData = this.formt(res.data.data)
          this.total = res.data.total
        }
      })
    },
    asd (res) {
      this.pagesize = res
      this._getlist(this.pagesize, this.currentPage).then(res => {
        if (res.data.code === 200) {
          this.tableData = this.formt(res.data.data)
          this.total = res.data.total
        }
      })
    },
    pagechange (res) {
      this.currentPage = res
      this._getlist(this.pagesize, this.currentPage).then(res => {
        if (res.data.code === 200) {
          this.tableData = this.formt(res.data.data)
          this.total = res.data.total
        }
      })
    },
    _getlist (pagesize, pagenum) {
      var data = {
        pagesize,
        pagenum
      }
      return this.axios.get('/api/list', {
        params: data
      })
    }
  }
}
</script>

<style scoped>
  .page{
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .pages{
    margin: 0 auto;
  }
</style>
